<template>
  <div class="container">
    <el-card class="box-card header-tags">
      <div>
        <span class="tags-font-weight">标签名称</span>
        <el-input size="small" class="input-width" v-model="tagsInput" placeholder="请输入内容"></el-input>
        <span class="tags-font-weight tags-righs">状态</span>

        <!-- Select选择器 -->
        <el-select class="select-right" size="small" v-model="selectValue" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <!-- 级联选择器 -->

        <el-button size="small" @click="deleteInoutSelect">清除</el-button>
        <el-button size="small" @click="inquireForm" type="primary">搜索</el-button>

        <!-- 添加标签 -->
        <el-button size="small" @click="addCatalogueList" type="success" icon="el-icon-edit" class="right-float">新增标签</el-button>
        <!-- 添加标签 -->
      </div>

      <!-- 警示 -->
      <el-alert class="alert-top-buttom" type="info" :closable="false" show-icon>
        {{ `数据一共${this.counts}条` }}
      </el-alert>
      <!-- 警示 -->

      <!-- 内容区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="100"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创作者"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | myFilters }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template slot-scope="scope">
            <el-link @click="tagsStateShange(scope.row)" :underline="false" type="primary">{{ scope.row.state == 1 ? '禁止' : '启动' }}</el-link>
            <el-link @click="getAmendData(scope.row)" :underline="false" :disabled="scope.row.state == 1 ? true : false" :class="['link-magin', scope.row.state == 0 ? 'blue' : '']">修改</el-link>
            <el-link @click="deleteOpenList(scope.row)" :underline="false" :disabled="scope.row.state == 1 ? true : false" :class="[scope.row.state == 0 ? 'blue' : '']">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 内容区域 -->
      <!-- 分页区域 -->
      <div class="pagination">
        <div class="pages">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(getList.page)"
            :total="Number(counts)"
            :page-size="Number(getList.pagesize)"
            :page-sizes="[5, 10, 20, 50]"
            layout="sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
      <!-- 分页区域 -->

      <tagsAdd ref="child" :amendOptions="amendOptions" />

      <!-- 修改弹出框 -->
      <el-dialog title="修改目录" :visible.sync="dialogVisible" width="400px">
        <div>
          <span>目录名称</span>
          <span>
            <el-select class="amend-width" v-model="amendValue">
              <el-option v-for="item in amendOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </span>
        </div>
        <div>
          <span>所属学科</span>
          <el-input size="medium" class="amend-width" v-model="amendInput" placeholder="请输入内容"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="amendData">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, update, changeState, remove } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
import tagsAdd from '../components/tags-add'
import { parseTime } from '@/utils/index'

export default {
  components: {
    tagsAdd
  },
  filters: {
    myFilters: function (time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      primary: 'primary',
      tagsInput: '', // input 双向绑定数据
      options: [{ // 级联数据
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      selectValue: null, // 级联选中项
      counts: 0, // 总条数
      tableData: [], // 标签列表数据
      getList: { // 列表配置参数
        page: 1,
        pagesize: 10,
        state: null,
        tagName: ''
      },

      currentPage: 1, // 分页第几页
      dialogVisible: false, // 修改对话框

      amendOptions: null, // 修改的级联数据
      amendValue: '', // 修改级联选中项value
      amendInput: '', // 修改input数据
      amendId: null // 数据Id
    }
  },
  created() {
    this.getTags()
  },
  methods: {
    // 获取标签数据
    async getTags() {
      try {
        const { data } = await list(this.getList)
        this.counts = data.counts
        this.tableData = data.items
        // console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    // 清除表单
    deleteInoutSelect() {
      this.tagsInput = ''
      this.selectValue = null
      this.getList.tagName = ''
      this.getList.state = null
      this.getTags()
    },
    // 搜索表单
    inquireForm() {
      this.getList.state = this.selectValue
      this.getList.tagName = this.tagsInput
      this.getTags()
    },
    // 修改级联数据get
    async getAmendData(row) {
      try {
        // console.log(row)
        const { data } = await simple()
        this.amendOptions = data
        if (row) {
          this.amendValue = row.subjectName
          this.amendInput = row.tagName
          this.amendId = row.id
          this.dialogVisible = true
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 修改数据
    async amendData() {
      try {
        await update({
          id: this.amendId,
          subjectID: this.amendValue,
          tagName: this.amendInput
        })
        this.dialogVisible = false
        this.$message.success('修改成功')
      } catch (err) {
        this.$message.error('错了哦')
      }
    },
    // 状态切换
    async tagsStateShange(row) {
      try {
        if (row.state) {
          row.state = 0
        } else {
          row.state = 1
        }
        await changeState({
          id: row.id,
          state: row.state
        })
        this.$message.success('修改成功')
      } catch (err) {
        this.$message.error('错了哦')
      }
    },
    // 删除列表数据
    deleteOpenList(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({
          id: row.id
        })
        this.getTags()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加目录
    addCatalogueList() {
      this.getAmendData()
      this.$refs.child.onClickLeft()
    },

    // 分页
    handleSizeChange(val) {
      this.getList.pagesize = val
      this.getTags()
    },
    handleCurrentChange(val) {
      this.getList.page = val
      this.getTags()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  .header-tags {
    margin: 10px;
  }
  .tags-font-weight {
    font-weight: 700;
    font-size: 14px;
    margin: 0 10px;
    color: #606266;
  }
  .input-width {
    width: 200px;
  }
  .tags-righs {
    margin-left: 50px;
  }
  .select-right {
    margin-right: 10px;
  }
  .right-float {
    float: right;
  }
  .alert-top-buttom {
    margin: 18px 0;
  }
  /deep/ .el-alert__icon.is-big {
    font-size: 16px !important;
    width: 15px;
  }
  /deep/ .el-alert__description {
    margin: 0 !important;
  }
  .link-magin {
    margin: 0 15px;
  }
  .blue {
    color: #409eff;
  }
  .pagination {
    height: 30px;
    margin-top: 20px;
  }
  .pages {
    float: right;
  }
  .amend-width {
    width: 280px;
    margin: 0 0 20px 10px;
  }
}
</style>
